<template>
  <div class="app-container">
    <el-col :span="24" :xs="24">
      <el-form :model="selectLearPlan" :inline="true">

        <el-form-item label="用户名称">
          <el-input v-model="selectLearPlan.userName" style="width: 240px;" placeholder="请输入用户名称"></el-input>
        </el-form-item>

        <el-form-item label="要求">
          <el-input v-model="selectLearPlan.planRequest" style="width: 240px;" placeholder="请输入要求"></el-input>
        </el-form-item>

        <el-form-item label="学习内容">
          <el-input v-model="selectLearPlan.planContent" style="width: 240px;" placeholder="请输入学习内容"></el-input>
        </el-form-item>

        <el-form-item label="安排">
          <el-input v-model="selectLearPlan.arrangement" style="width: 240px;" placeholder="请输入安排"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>

      </el-form>

      <!--table表格 -->
      <el-table
          :data="learPlanAll"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column label="ID" width="50" prop="planId"></el-table-column>

          <el-table-column label="用户名称" width="140" align="center" prop="userName"></el-table-column>

          <el-table-column label="计划日期" width="140" align="center" prop="planDate"></el-table-column>

          <el-table-column label="计划时间" width="140" align="center" prop="planTime"></el-table-column>

          <el-table-column label="要求" width="260" align="center" prop="planRequest" :show-overflow-tooltip='true'></el-table-column>

          <el-table-column label="学习内容" width="240" align="center" prop="planContent"></el-table-column>

          <el-table-column label="安排" width="280" align="center" prop="arrangement" :show-overflow-tooltip='true'></el-table-column>

          <el-table-column label="状态" width="120" align="center" prop="status"></el-table-column>

        </el-table>

        <!--分页-->
        <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :page-size="selectLearPlan.pageSize"
              layout="prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
    </el-col>
  </div>
</template>

<script>
  import { getLearPlanAll } from "@/api/poetryLibrary/learnPlan";
  export default{
    name: 'learnPlan',

    data(){
      return{
        /*
        总页数
        */
        total:undefined,
        //搜索实体类
        selectLearPlan:{
          //用户姓名
          userName:null,
          //要求
          planRequest:null,
          //学习内容
          planContent:null,
          //安排
          arrangement:null,
          /*当前页*/
          pageNum:1,
          /*一页的数量*/
          pageSize:10,
        },
        //所有学习计划
        learPlanAll:[]
      }
    },
    methods:{
      //搜索事件
      getLearPlan(){
        getLearPlanAll(this.selectLearPlan).then(resp=>{
          this.learPlanAll=resp.data.content
          this.total=resp.data.totalSize
        })
      },
      /*点击搜索按钮时*/
      handleQuery(){
        this.selectLearPlan.pageNum=1
        this.getLearPlan()
      },
      //重置事件
      resetQuery(){
        this.selectLearPlan={};
        this.resetForm("selectLearPlan");
      },
      /*点击页面时*/
      handleCurrentChange(currentPage){
        this.selectLearPlan.pageNum=currentPage;
        this.getLearPlan()
      },
      //diaClose关闭时操作
      diaAllClose(){
        this.nowAuthor={}
        this.$refs['ruleFrom'].clearValidate()//移除校验结果并重置字段值
        this.getLearPlan()
      }
    },
    created(){
      this.getLearPlan()
    }
  }
</script>

<style>
</style>
